<template>
    <div class="layout-main page-component__scroll" :class="{hidderSidebar : sidebar}">
        
        <!-- LOGO -->
        <div class="logo_wrapper">
            <div class="left_logo" v-if="!sidebar">
                <img :src="Logo" alt="">
            </div>
            <div class="left_logo left_logo_mini" v-else>
                <img :src="LogoMini" alt="">
            </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="layout-sidebar-container">

            <!-- 侧边栏一级菜单 -->
            <el-menu :collapse="isCollapse" :default-active="$route.path" background-color="#304156" text-color="#f0f0f0" active-text-color="#409EFF">

                <template v-for="item in menus">

                    <template v-if="item.children">
                        <template v-if="item.children.length === 1">

                            <router-link :to="item.path+'/'+item.children[0].path" :key="`menu-${item.name}`">
                                <el-menu-item :index="item.path+'/'+item.children[0].path" :key="item.path+'/'+item.children[0].path">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">{{item.children[0].meta.title}}</span>
                                </el-menu-item>
                            </router-link>
                            
                        </template>

                        <template v-else>
                            <el-submenu :index="item.path" :key="item.path">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">{{item.meta.title}}</span>
                                </template>
                                
                                <SideSubMenu :subMenus="item.children" :parentPath="item.path"></SideSubMenu>
                            </el-submenu>
                        </template>

                    </template>

                    <template v-else>
                        <template v-if="!item.meta.hideInMenu">

                            <template v-if="item.meta.href">
                                <template v-if="!item.meta.iframe">
                                    <a :href="item.meta.href" target="_blank" :key="`menu-${item.name}`">
                                        <el-menu-item :index="item.path" :key="item.path">
                                            <i class="el-icon-menu"></i>
                                            <span slot="title">{{item.meta.title}}</span>
                                        </el-menu-item>
                                    </a>
                                </template>
                            </template>

                            <template v-else>
                                <router-link :to="item.path" :key="`menu-${item.name}`">
                                    <el-menu-item :index="item.path" :key="item.path">
                                        <i class="el-icon-menu"></i>
                                        <span slot="title">{{item.meta.title}}</span>
                                    </el-menu-item>
                                </router-link>
                            </template>

                        </template>
                    </template>

                </template>
                
            </el-menu>
        </div>

        <!-- 侧边栏 -->
        <!-- <layout-sidebar></layout-sidebar> -->

        <!-- 主体内容 -->
        <div class="layout-container">
            <!-- 头部 -->
            <layout-header></layout-header>
            <!-- 正文 -->
            <layout-content></layout-content>
        </div>

        <!-- 消息提示音 -->
        <audio id="sound" autoplay="autoplay"></audio>
    </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import SideSubMenu from './side-sub-menu'
import LayoutHeader from "./layout-header.vue";
import LayoutContent from "./layout-content.vue";
import initWebsocket from "@/libs/websocket.js";
import Logo from '@/assets/images/logo.png'
import LogoMini from '@/assets/images/logo_mini.png'
export default {
    name: "Main",
    components: {
        LayoutHeader,
        LayoutContent,
        SideSubMenu
    },
    computed: {
        ...mapGetters(["menus", "sidebar"]),
        sidebar() {
            return this.$store.state.app.sidebar;
        },
        isCollapse() {
            return this.sidebar;
        },
        defaultActive() {
            return this.$route.path;
        }
    },
    mounted () {
        this.$nextTick(function () {
            // initWebsocket(); //连接WebSocket服务器
        })
    },
    data() {
        return {
            Logo,
            LogoMini
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
@import "../../assets/styles/layout";
</style>